<template>
  <div class="form-section">
    <el-row :gutter="20">
      <!-- 字段类型 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.type', '字段类型')"
          prop="config.type"
        >
          <ra-dict-select
            :style="commonInputStyle"
            :placeholder="$p('menu.dev.field.field.type', '字段类型')"
            type="select"
            :code="dictCodeForType"
            v-model="modelValue.config.type"
            :filterable="true"
            :clearable="true"
            @change="handleTypeChange"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 字段标题 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.title', '字段标题')"
          prop="title"
        >
          <el-input
            :style="commonInputStyle"
            v-model="modelValue.title"
            :placeholder="$p('menu.dev.field.field.title', '字段标题')"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 字段名称 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field', '字段')"
          prop="field"
        >
          <el-input
            :style="commonInputStyle"
            v-model="modelValue.field"
            placeholder="例如：user_name"
            @change="handleFieldNameChange"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 创建字段 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.create_field', '创建字段')"
          prop="config.create_field"
        >
          <el-radio-group
            v-model="modelValue.config.create_field"
            :style="commonInputStyle"
          >
            <el-radio value="create">创建</el-radio>
            <el-radio value="relation">关联</el-radio>
            <el-radio value="none">无</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>

      <!-- 搜索配置 -->
      <el-col :xs="24" :sm="12" :md="8">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.grid_search', '搜索配置')"
          prop="config.grid_search"
        >
          <ra-dict-select
            :style="commonInputStyle"
            :placeholder="$p('menu.dev.field.field.grid_search', '搜索配置')"
            type="select"
            code="sys_search"
            v-model="modelValue.config.grid_search"
          />
        </el-form-item-plus>
      </el-col>

      <!--      &lt;!&ndash; 表单提交 &ndash;&gt;-->
      <!--      <el-col :xs="xs" :sm="sm" :md="md">-->
      <!--        <el-form-item-plus-->
      <!--          :label="$t('menu.dev.field.field.form_post', '表单录入')"-->
      <!--          prop="config.form_post"-->
      <!--        >-->
      <!--          <el-radio-group-->
      <!--            v-model="modelValue.config.form_post"-->
      <!--            :style="commonInputStyle"-->
      <!--          >-->
      <!--            <el-radio :value="1">是</el-radio>-->
      <!--            <el-radio :value="0">否</el-radio>-->
      <!--          </el-radio-group>-->
      <!--        </el-form-item-plus>-->
      <!--      </el-col>-->

      <!-- 字段关联 -->
      <el-col :xs="xs" :sm="24" :md="24" v-if="isRelationField">
        <el-form-item-plus
          :label="$t('menu.dev.field.field.field_belong', '关联字段')"
          prop="config.field_belong"
        >
          <RaRelationField v-model="modelValue.config.field_belong" />
        </el-form-item-plus>
      </el-col>

      <!-- 备注 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('common.field.remark', '备注')"
          prop="remark"
        >
          <el-input
            v-model="modelValue.remark"
            :style="commonInputStyle"
            :placeholder="$p('common.field.remark', '备注')"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 排序 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus :label="$t('common.field.sort', '排序')" prop="sort">
          <el-input-number
            :placeholder="$p('common.field.sort', '排序')"
            v-model="modelValue.sort"
            :style="commonInputStyle"
            controls-position="right"
            :min="0"
          />
        </el-form-item-plus>
      </el-col>

      <!-- 状态 -->
      <el-col :xs="xs" :sm="sm" :md="md">
        <el-form-item-plus
          :label="$t('common.field.status', '状态')"
          prop="status"
        >
          <el-radio-group v-model="modelValue.status" :style="commonInputStyle">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item-plus>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

const xs = 24;
const sm = 12;
const md = 8;

// Props定义
const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  dictCodeForType: {
    type: String,
    required: true,
  },
  commonInputStyle: {
    type: Object,
    default: () => ({ minWidth: '220px' }),
  },
});

// 事件定义
const emit = defineEmits([
  'update:modelValue',
  'typeChange',
  'fieldNameChange',
]);

// 计算属性
const isRelationField = computed(
  () => props.modelValue.config.create_field === 'relation',
);

// 事件处理
const handleTypeChange = (type) => {
  emit('typeChange', type);
};

const handleFieldNameChange = (field) => {
  emit('fieldNameChange', field);
};

watch(
  () => props.modelValue.config.create_field,
  (value) => {
    if (value !== 'create') {
      props.modelValue.config.form_post = 0;
    }
  },
);
</script>

<style lang="scss" scoped></style>
